<template>
    <video ref="videoMy" :src="src" :type="type" muted  @mouseleave="yichu(index)" @mouseenter="yiru(index)"></video>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import Hls from 'hls.js'

export default {
  name: 'MyVideo',
  props: ['cover', 'type', 'src'],
  setup(props) {
    const data = reactive({
    })
    const videoMy = ref()
    onMounted(() => {
      if (props.type === 'm3u8'){
        if (Hls.isSupported()) {
          this.hlsjs = new Hls()
          this.hlsjs.loadSource(props.src)
          this.hlsjs.attachMedia(videoMy.value)
          // console.log(this.hlsjs)
          this.hlsjs.on(Hls.Events.MANIFEST_PARSED, () => {
            videoMy.value.play()
            // console.log('加载成功')
          })
          this.hlsjs.on(Hls.Events.ERROR, (event, data) => {
            // console.log('加载失败')
          })
        }
      } else {
        console.log(props.type)
        videoMy.value.src = props.src
        videoMy.value.type = props.type
      }

    })
    function yiru(index) {
      playerVideoMy(0)
    }
    function yichu(index) {
      playerVideoMy(0)
      videoMy.value.pause()
    }
    function playerVideoMy(startTime) {
      setStarTime(startTime)
    }
    // 设置视频开始播放时间（原生video）
    function setStarTime(startTime) {
      // console.log(videoMy.value.currentTime)
      videoMy.value.currentTime = startTime
      videoMy.value.oncanplay = () => {
        videoMy.value.play()
      }
    }
    return {
      data, videoMy, yiru, yichu, setStarTime, playerVideoMy
    }
  }
}
</script>

<style scoped>
video{
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  content-visibility: visible;
  object-fit: cover;
}
</style>
